<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 礼物商城</el-breadcrumb-item>
                <el-breadcrumb-item>添加礼物</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="礼物名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="礼物类型">
                        <el-select v-model="form.type" placeholder="请选择">
                            <el-option key="sw" label="实物礼品" value="1"></el-option>
                            <el-option key="xn" label="虚拟礼品" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="积分">
                        <el-input v-model="form.amount" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="form.price" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input v-model="form.stockNum" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-upload
                            class="upload-demo"
                            :action="baseUrl+'/gateway/api/system/upload'"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :multiple="true"
                            name="file"
                            :on-success="handleSuccess"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="描述">
                        <quill-editor v-model="form.description"
                            ref="myQuillEditor"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @ready="onEditorReady($event)">
                        </quill-editor>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
	import { addGift } from "../../api/gift.js";
    export default {
        name: 'baseform',
        data: function(){
            return {
                editorOption:{},
                fileList:[],
                baseUrl:this.$baseUrl,
                form: {
                    name:'',
                    type:'',
                    images:'',
                    description:'',
                    price:'',
                    amount:'',
                    stockNum:''
                }
            }
        },
        methods: {
            onSubmit() {
				let imgArr = [];
				this.fileList.forEach((f,i)=>{
					imgArr.push(f.response.data.url)
				})
				this.form.images = imgArr.join(',');
				
				if(this.form.name==""){
					this.$message({
						message:"请输入礼物名",
						type:"error"
					});
					return false;
				}
				if(this.form.type==""){
					this.$message({
						message:"请选择礼物类型",
						type:"error"
					});
					return false;
				}
				if(this.fileList.length<=0){
					this.$message({
						message:"最少上传一张图片",
						type:"error"
					});
					return false;
				}
				if(this.form.price==""){
					this.$message({
						message:"请输入礼物价格",
						type:"error"
					});
					return false;
				}
				if(this.form.amount==""){
					this.$message({
						message:"请输入兑换礼物所需积分",
						type:"error"
					});
					return false;
				}
				if(this.form.stockNum==""){
					this.$message({
						message:"请输入礼物库存",
						type:"error"
					});
					return false;
				}
				if(this.form.description==""){
					this.$message({
						message:"请输入礼物描述",
						type:"error"
					});
					return false;
				}
				addGift(this.form).then(res=>{
					if(res.flag==1){
						this.$message({
							message:"提交成功",
							type:"success",
							duration:"1000"
						});
						setTimeout(()=>{
							this.$router.push('/giftList')
						},1000);
					}else{
						this.$message({
							message:res.msg,
							type:"error"
						});
					}
				}).catch(err=>{
					this.$message({
						message:err.msg,
						type:"error"
					});
				});
            },
            onEditorBlur(){

            },
            onEditorFocus(){

            },
            onEditorReady(){

            },
            handleRemove(file, fileList){
				fileList.forEach((f,index)=>{
					if(f.name==file.name){
						fileList.splice(index,1);
					}
				})
				this.fileList = fileList;
            },
            handlePreview(){

            },
            handleSuccess(response, file, fileList){
                this.fileList = fileList;
            }
        }
    }
</script>